<template>
    <div class="home">
        <banner isHome="true"></banner>


        <el-row type="flex" class="row-bg" justify="center">

            <div  class=" col-lg-2 col-md-3 col-sm-6 col-xs-8">
                <el-col class="site-content animate"></el-col>
                <el-col >
                    <el-row  type="flex" justify="center" class="video-title" :class="fixed == true ? 'fixedBtn' :''">
                        <el-col >
                            <el-card shadow="hover" style="width: auto;font-size: large;text-align: center;color: #ff6d6d">【分类】</el-card>
                            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                                <el-card shadow="hover">
                                    <el-menu-item style="font-size: large;width: auto;text-align: center;" v-for="(category,index) in categoryList" :key="index" :index="index+''" @click="queryArticleByCategory('','',category.name)">{{category.name}}</el-menu-item>
                                </el-card>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-col>
            </div>

            <div  class=" col-lg-7 col-md-9 col-sm-6 col-xs-6">

                <el-col >
                    <div class="site-content animate">
                        <!--通知栏-->
                        <div class="notify">
                            <div class="search-result" v-if="hideSlogan">
                                <span v-if="searchWords">搜索结果："{{searchWords}}" 相关文章</span>
                                <span v-else-if="category">分类 "{{category}}" 相关文章</span>
                            </div>
                            <quote v-else>中国传统文化文章</quote>
                        </div>

                        <!--焦点图-->
                        <div class="top-feature" v-if="!hideSlogan">
                            <section-title>
                                <div style="display: flex;align-items: flex-end;">聚焦<small-ico></small-ico></div>
                            </section-title>
                            <div class="feature-content">
                                <div class="feature-item" v-for="item in features" :key="item.title">
                                    <Feature :data="item"></Feature>
                                </div>
                            </div>
                        </div>

                        <!--文章列表-->
                        <main class="site-main" :class="{'search':hideSlogan}">
                            <section-title v-if="!hideSlogan">推荐</section-title>
                            <template v-for="item in postList">
                                <post :post="item" :key="item.id"></post>
                            </template>
                        </main>

                        <!--加载更多-->
                        <div class="more" v-show="hasNextPage">
                            <div class="more-btn" @click="loadMore">More</div>
                        </div>
                    </div>
                </el-col>

                <el-col >
                    <!--分类-->
                    <!--                <div class="type">-->
                    <!--                    <span><i class="el-icon-s-goods type-span-i">分类</i></span>-->
                    <!--                    <span><el-button style="color: #ff6d6d" :autofocus="true">更多<i class="el-icon-caret-right"></i></el-button></span>-->
                    <!--                    <el-button type="danger" size="medium" v-for="category,index in categoryList" class="type-style">-->
                    <!--                        <span style="float: left;color: white">{{category.name}}</span>-->
                    <!--                        <el-tag type="warning" size="mini" :hit="true" :disable-transitions="true" style="float: right">标签四</el-tag>-->
                    <!--                    </el-button>-->
                    <!--                </div>-->

                    <!--标签云-->
                    <!--                <div class="tag">-->
                    <!--                    <span><i class="el-icon-s-management tag-span-i">标签云</i></span>-->
                    <!--                    <span><el-button style="color: #ff6d6d" :autofocus="true">更多<i class="el-icon-caret-right"></i></el-button></span>-->
                    <!--                    <p> </p>-->
                    <!--                    <el-button plain  type="danger" size="small" v-for="tag,index in tags">-->
                    <!--                        <i class="el-icon-s-promotion"></i> {{tag.name}}-->
                    <!--                    </el-button>-->
                    <!--                </div>-->
                </el-col>
            </div>

        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </el-row>

    </div>
</template>

<script>
    import Banner from '@/components/banner'
    import Feature from '@/components/feature'
    import sectionTitle from '@/components/section-title'
    import Post from '@/components/post'
    import SmallIco from '@/components/small-ico'
    import Quote from '@/components/quote'
    import {fetchFocus, fetchList, blogList, tagList, categoryList, queryArticleByCategory, queryBlogByKey } from '../api'

    export default {
        name: 'Home',
        props: ['cate', 'words'],
        data() {
            return {
                activeIndex:'',
                current: 1,
                size: 10,
                total:0,
                features: [],
                postList: [],
                currPage: 1,
                hasNextPage: false,
                isCollapse: false,
                tags: [],
                categoryList:[],
                fixed: false,
                // src: require('examples/001.obj')
            }
        },
        components: {
            Banner,
            Feature,
            sectionTitle,
            Post,
            SmallIco,
            Quote
        },
        watch:{
            $route(n,o){
                if(n.fullPath !== o.fullPath){ //监听路由参数是否变化
                    if (this.$route.params.words){
                        this.current = 1;
                        this.queryBlogByKey(this.current,this.size,this.$route.params.words)
                    }
                    else {
                        this.current = 1;
                        this.BlogList(this.current,this.size)
                    }
                }
            }
        },
        computed: {
            searchWords() {
                return this.$route.params.words
            },
            category() {
                return this.$route.params.cate
            },
            hideSlogan() {
                return this.category || this.searchWords
            },
            notice() {
                return this.$store.getters.notice
            }
        },

        methods: {
            //分页
            handleCurrentChange(val){
                this.$nextTick(()=>{
                    this.current = val;
                    if (this.$route.params.words){
                        this.queryBlogByKey(this.current,this.size,this.$route.params.words)
                    }
                    else if (this.$route.params.cate)
                    {
                        this.queryArticleByCategory(this.current,this.size,this.category)//methods中封装的加载数据函数
                    }else {
                        this.BlogList(this.current,this.size)
                    }
                    console.log(this.current)
                })
            },
            // 分页查询文章
            BlogList(current, size){
                blogList(current, size).then(res=>{
                    this.postList = res.data.records || []
                }).catch(err => {
                    console.log(err)
                })
            },
            // 热门标签
            TagListt(){
                tagList().then(res=>{
                    this.tags = res.data || []
                }).catch(err=>{
                    console.log(err)
                })
            },
            // 全部分类
            CategoryList(){
                categoryList().then(res=>{
                    this.categoryList = res.data || []
                }).catch(err=>{
                    console.log(err)
                })
            },
            //分类文章
            queryArticleByCategory(current,size,category){
                queryArticleByCategory(current,size,category).then(res=>{
                    this.postList = res.data.records || []
                    this.total = res.data.total
                }).catch(err=>{
                    console.log(err)
                })
            },
            fetchFocus() {
                fetchFocus().then(res => {
                    this.features = res.data || []
                }).catch(err => {
                    console.log(err)
                })
            },
            loadMore() {
                fetchList({page:this.currPage+1}).then(res => {
                    this.postList = this.postList.concat(res.data.items || [])
                    this.currPage = res.data.page
                    this.hasNextPage = res.data.hasNextPage
                })
            },
            queryBlogByKey(){
                queryBlogByKey(this.$route.params.words,this.current,this.size).then(res=>{
                    this.postList = res.data.records || []
                    this.total = res.data.total
                }).catch(err=>{
                    console.log(err)
                })
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            fixedActiveBtn() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                scrollTop >=1212 ? this.fixed = true : this.fixed = false
            },

        },
        mounted() {
            this.fetchFocus();
            if (!this.$route.params.words){
                this.BlogList();
                // setInterval(this.CategoryList(),1000);
            }
            this.CategoryList()
            this.TagListt()
            this.queryBlogByKey()
            window.addEventListener('scroll', this.fixedActiveBtn);
        },
        created(){
        },
        beforeDestroy(){

        }
    }

</script>
<style scoped lang="less">

    .fixedBtn {
        position: fixed;   //固定定位
        top: -80px;
        left: 0;
        z-index: 200;
    }

    .my-button{
        width: 250px;
        height: 50px;

        vertical-alinge:middle;
        border-radius: 5px;
        box-shadow: 5px 10px 5px 0px #c04851;
    }

    .sort{
        width: 300px;
        height: 500px;
        float: left;
        margin-top: 40px;
        margin-left: 80px;
        border-radius: 10px;
        box-shadow: 10px 10px 5px 5px #c04851;

    }

    .site-content{

        .notify {
            width: 100%;
            margin: 0px 0;
            border-radius: 3px;
                & > div {
                  padding: 20px;
                }
            }


        .search-result {
            padding: 15px 20px;
            text-align: center;
            font-size: 20px;
            font-weight: 400;
            border: 1px dashed #ddd;
            color: #828282;
        }
    }

    .top-feature {
        width: 100%;
        height: auto;
        margin-top: 30px;

        .feature-content {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            position: relative;

            .feature-item {
                width: 32.9%;
            }
        }
    }

    .site-main {
        padding-top: 80px;

        &.search {
            padding-top: 0;
        }
    }

    .more{
        margin: 50px 0;
        .more-btn{
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #ADADAD;
            border: 1px solid #ADADAD;
            border-radius: 20px;
            margin: 0 auto;
            cursor: pointer;
            &:hover{
                color: #8fd0cc;
                border: 1px dashed #8fd0cc;
            }
        }
    }
    /*右边栏*/
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 100%;
        min-height: 600px;

        border-top: 3px solid pink;
    }
    /*分类*/
    .type{
        width: 100%;
        padding: 10px;
        margin-bottom: 30px;
        border-radius: 5px;
        border: 1px solid #dddddd;
        border-top:3px solid pink;
    /*box-shadow: #dddddd 5px 5px 16px;*/
        span{
            color: #ff6d6d;
        }
        .type-span-i{
            margin: 20px 140px 30px 5px;
        }
    }
    .type-style{
        margin: 8px 0px;
        width: 100%;
    }

    /*标签云*/
    .tag{
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #dddddd;
        border-top:3px solid pink;
        /*box-shadow: #dddddd 5px 5px 16px;*/
        span{
            color: #ff6d6d;
        }
        .tag-span-i{
            margin: 20px 120px 30px 5px;
        }
    }
    .tag-style{
        margin: 8px 0px;
    }


    /******/
    @media (max-width: 800px) {
        .top-feature {
            display: none;
        }

        .site-main {
            padding-top: 40px;
        }

        .site-content {
            .notify {

                margin: 30px 0 0 0;
            }

            .search-result {
                margin-bottom: 20px;
                font-size: 16px;
            }
        }
    }

    /******/
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }


</style>
